import { useEffect, useState } from "react";
import servicer from "../../api/servicer";
import { Button, Card, Checkbox, Col, Modal, Row, Spin, TextArea } from "@douyinfe/semi-ui";

export default function Welcome() {
    const tmp = {
        _anthors: "",
        _excludes: "",
    };

    const [canSave, setCanSave] = useState(false);
    const [open1, setOpen1] = useState(false);
    const [open2, setOpen2] = useState(false);
    const [loading, setLoading] = useState(false);
    const entity = {
        welcome: "",
        follow: "",
        zan: "",
        share: "",
        order: "",
        welcomeBlur: false,
        followBlur: false,
        zanBlur: false,
        shareBlur: false,
        orderBlur: false,
        anthors: "",
        excludes: "",
    };

    const [data, setData] = useState({ ...entity });

    useEffect(() => {
        setLoading(true)
        servicer.getWelcomeInfo().then(({ data }) => {
            setData(data)
            setCanSave(true)
            setLoading(false)
        }).catch(() => {
            setCanSave(true)
            setLoading(false)
        })
    }, [])

    useEffect(() => {
        const timer = setTimeout(() => {
            if (data && canSave) {
                servicer.setWelcomeInfo(data).catch(() => { })
            }
        }, 500);

        return () => { clearTimeout(timer); };  // 如果组件卸载或者值改变，清除定时器
    }, [data]);

    return <>
        <Spin spinning={loading}>
            <Modal
                title="主播名设置"
                width={540}
                visible={open1}
                onCancel={() => setOpen1(false)}
                onOk={() => {
                    setData({ ...data, anthors: tmp._anthors })
                    tmp._anthors = '';
                    setOpen1(false)
                }}
                closeOnEsc={true}
            >
                请在下方输入直播间主播名，一行填写一个，直播时可选择需生效的具体主播名
                <Row gutter={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }} style={{ marginTop: '20px' }}>
                    <Col span={12}><TextArea className="resize-none" style={{ height: '190px' }} placeholder="例如:修心" defaultValue={data.anthors} onChange={(val) => tmp._anthors = val} /></Col>
                    <Col span={12}><img width={250} src='https://img.alicdn.com/bao/uploaded/i4/2829330402/O1CN01opVjNj1EqA82l3m7c_!!2-item_pic.png' /></Col>
                </Row>
            </Modal>


            <Modal
                title="监控排除指定账号"
                width={540}
                visible={open2}
                onCancel={() => setOpen2(false)}
                onOk={() => {
                    setData({ ...data, excludes: tmp._excludes })
                    tmp._excludes = ''
                    setOpen2(false)
                }}
                closeOnEsc={true}
            >
                请在下方输入需要排除的抖音账号名，一行填写一个，注意需要完全一致不要写错哦~
                提示：该功能对“下单感谢”无效
                <Row gutter={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }} style={{ marginTop: '20px' }}>
                    <Col span={12}><TextArea className="resize-none" style={{ height: '190px' }} placeholder="例如:修心" defaultValue={data.excludes} onChange={(val) => tmp._excludes = val} /></Col>
                    <Col span={12}><img width={250} src='https://img.alicdn.com/bao/uploaded/i3/2829330402/O1CN017zydVY1EqA5P4YWLf_!!2-item_pic.png' /></Col>
                </Row>
            </Modal>

            <div style={{ lineHeight: '30px', margin: '10px 0' }}>
                主播名（已添加{data.anthors.trim() ? data.anthors.trim().split('\n').length : 0}个）
                <Button size={'small'} onClick={() => setOpen1(true)} style={{ marginRight: '15px' }}>编辑</Button>

                观众名（已添加{data.excludes.trim() ? data.excludes.trim().split('\n').length : 0}个）
                <Button size={'small'} onClick={() => setOpen2(true)}>编辑</Button>
            </div>


            <Card
                title="欢迎进入直播间"
                headerLine={false}
                headerExtraContent={
                    <div className="flex items-center space-x-2" style={{ float: 'right' }}>
                        <Checkbox checked={!!data.welcomeBlur} id="servicer-welcome"
                            onChange={(e) => { setData({ ...data, welcomeBlur: e.target.checked }) }}
                        >观众名打码</Checkbox>
                    </div>
                }
            >
                欢迎语格式 注：一行一条，系统会随机从预设格式中套用一条；#主播 代表主播名， #观众 代表观众名
                <TextArea value={data.welcome} className="resize-none h-[100px]" placeholder="请输入回复内容"
                    onChange={(value) => { setData({ ...data, welcome: value }) }}
                />
            </Card>


            <Card
                style={{ marginTop: '10px' }}
                title="感谢关注主播"
                headerLine={false}
                headerExtraContent={
                    <div className="flex items-center space-x-2" style={{ float: 'right' }}>
                        <Checkbox checked={!!data.followBlur} id="servicer-welcome"
                            onChange={(e) => {
                                setData({ ...data, followBlur: e.target.checked })
                            }}
                        >观众名打码</Checkbox>
                    </div>
                }
            >
                欢迎语格式 注：一行一条，系统会随机从预设格式中套用一条；#主播 代表主播名， #观众 代表观众名
                <TextArea value={data.follow} className="resize-none h-[100px]" placeholder="请输入回复内容"
                    onChange={(value) => { setData({ ...data, follow: value }) }}
                />
            </Card>

            <Card
                style={{ marginTop: '10px' }}
                title="感谢点赞加热"
                headerLine={false}
                headerExtraContent={
                    <div className="flex items-center space-x-2" style={{ float: 'right' }}>
                        <Checkbox checked={!!data.zanBlur} id="servicer-welcome"
                            onChange={(e) => {
                                setData({ ...data, zanBlur: e.target.checked })
                            }}
                        >观众名打码</Checkbox>
                    </div>
                }
            >
                欢迎语格式 注：一行一条，系统会随机从预设格式中套用一条；#主播 代表主播名， #观众 代表观众名
                <TextArea value={data.zan} className="resize-none h-[100px]" placeholder="请输入回复内容"
                    onChange={(value) => { setData({ ...data, zan: value }) }}
                />
            </Card>

            <Card
                style={{ marginTop: '10px' }}
                title="感谢分享直播间"
                headerLine={false}
                headerExtraContent={
                    <div className="flex items-center space-x-2" style={{ float: 'right' }}>
                        <Checkbox checked={!!data.shareBlur} id="servicer-welcome"
                            onChange={(e) => {
                                setData({ ...data, shareBlur: e.target.checked })
                            }}
                        >观众名打码</Checkbox>
                    </div>
                }
            >
                欢迎语格式 注：一行一条，系统会随机从预设格式中套用一条；#主播 代表主播名， #观众 代表观众名
                <TextArea value={data.share} className="resize-none h-[100px]" placeholder="请输入回复内容"
                    onChange={(value) => { setData({ ...data, share: value }) }}
                />
            </Card>

            <Card
                style={{ marginTop: '10px' }}
                title="感谢下单付款"
                headerLine={false}
                headerExtraContent={
                    <div className="flex items-center space-x-2" style={{ float: 'right' }}>
                        <Checkbox checked={!!data.orderBlur} id="servicer-welcome"
                            onChange={(e) => {
                                setData({ ...data, orderBlur: e.target.checked })
                            }}
                        >观众名打码</Checkbox>
                    </div>
                }
            >
                欢迎语格式 注：一行一条，系统会随机从预设格式中套用一条；#主播 代表主播名， #观众 代表观众名
                <TextArea value={data.order} className="resize-none h-[100px]" placeholder="请输入回复内容"
                    onChange={(value) => { setData({ ...data, order: value }) }}
                />
            </Card>
        </Spin>
    </>

}